import React from 'react'
import { NavBar, Icon } from 'antd-mobile';
import '../../styles/mender/login.css'
import { List, InputItem, WhiteSpace } from 'antd-mobile';
import { Button } from 'antd-mobile';
import axios from 'axios'
import Axios from 'axios';
axios.default.widthCredentials = true
// import { getLogin } from "../../api"

class Login extends React.Component {
    constructor() {
        super()
        this.state = {
            form: {
                phone: '',
                password: ''
            }
        }
    }

    goMenber() {
        this.props.history.push("/menber")
    }

    sign() {
        // 17855344130 asdf1234
        let { phone, password } = this.state.form
        Axios.get('http://localhost:4000/login/cellphone?phone=' + phone + '&password=' + password)
            .then(res => {
                console.log(res)
                if (res.data.code === 200) {
                    let token = res.data.bindings[0].userId
                    localStorage.setItem("token", token, 30);
                    let profile = JSON.stringify(res.data.profile)
                    localStorage.setItem("profile", profile, 30);
                    // Cookie.setItem("token", token,30);
                    this.props.history.push('/find')
                    this.props.history.go(0)
                } else {
                    alert(res.data.msg);
                }
            })
            .catch(err => {
                alert('手机号或者密码错误')
            })
    }

    mHander(mob) {
        let { phone, password } = this.state.form
        this.setState({
            form: {
                phone: mob,
                password: password,
            }
        })
    }

    pHander(psd) {
        let { phone, password } = this.state.form
        this.setState({
            form: {
                phone: phone,
                password: psd,
            }
        })
    }

    render() {
        let { phone, password } = this.state.form
        return (
            <div>
                <div className='log-wrap'>
                    <NavBar
                        mode="light"
                        icon={<Icon type="left" />}
                        onClick={this.goMenber.bind(this)}
                    >手机号登录</NavBar>

                    <div className="log-ipt">
                        <InputItem value={phone}
                            onChange={this.mHander.bind(this)}
                            placeholder="请输入手机号"
                            className='log-mob-ipt'>+ 86 </InputItem>
                        <InputItem
                            onChange={this.pHander.bind(this)}
                            value={password} type="password"
                            placeholder="请输入密码" extra="忘记密码？"
                            className='log-mm-ipt'></InputItem>
                    </div>
                    <Button type="primary" onClick={this.sign.bind(this)}>登录</Button><WhiteSpace />
                </div>
            </div>
        )
    }
}

export default Login